<style lang="less" scoped>
.set-pwd {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f2f2f2;

  .set-pwd-container {
    width: 100%;
    height: 100%;
    position: absolute;
    // overflow-x: hidden;
    // overflow-y: auto;
    // -webkit-overflow-scrolling: touch;
    background:#ffffff;
    .container-wrapper {
      margin:56px 74px 0 74px;
      position:relative;
      .user-info-bg {
        width: 600px;
        height: 96px;
        border-radius: 8px;
        background-color: rgba(241, 241, 241, 1);
        display: flex;
        align-items: center;
        padding-left: 40px;
      }
      .user-info {
        .user-info-bg;
      }
      .form-input {
        width: 462px;
        border-radius: 16px;
        background-color: rgba(241, 241, 241, 1);
        font-size: 28px;
        border: none;
        margin-bottom: 0;
        line-height: normal;
        padding: 0 0 0 0;
      }

      .marginBottom38 {
        margin-bottom: 38px;
      }

      input::-webkit-input-placeholder {
        color: #aab2bd;
      }

      .set-pwd-btn {
        margin-top: 86px;
        width: 600px;
        height: 96px;
        border-radius: 16px;
        background-color: #536dfe;
        box-shadow: 0px 5px 12px 0px rgba(4, 4, 5, 0.44);
        line-height: 96px;
        padding: 0;
        color: rgba(255, 255, 255, 1);
        font-size: 36px;
      }

      .desc {
        font-size: 40px;
        color: rgba(61, 60, 60, 1);
        margin-bottom: 8px;
      }
      .pwd-desc {
        font-size: 24px;
        color: rgba(159, 159, 159, 1);
        margin-top: 16px;
      }

      .jeicon {
        color: #cfcfcf;
        font-size: 30px;
      }

      .delete-phone {
        position: absolute;
        right: 80px;
      }

      .jeicon-eye {
        position: absolute;
        right: 28px;
        color: rgba(83, 109, 254, 1);
        font-size: 24px;
      }
      .jeicon-eye-close {
        position: absolute;
        right: 30px;
        color: rgba(83, 109, 254, 1);
        font-size: 30px;
      }

      .phone-desc {
        margin-top: 16px;
        font-size: 18px;
        margin-left: 40px;
        color: rgba(61, 60, 60, 1);
      }
    }
  }
}
</style>

<template>
  <div class="set-pwd">
    <div class="set-pwd-container">
      <div class="container-wrapper">
        <div class="desc">
          请设置新密码
        </div>
        <div class="user-info ">
          <input
            ref="passwordInput"
            v-show="showPwd"
            v-model="loginInfo.newPwd"
            type="password"
            placeholder=""
            class="form-input"
            maxlength="20"
          >
          <input
            ref="textInput"
            v-show="!showPwd"
            v-model="loginInfo.newPwd"
            type="text"
            placeholder=""
            class="form-input"
            maxlength="20"
          >
          <i
            @tap="clearPwd"
            class="jeicon jeicon-error-circle delete-phone"
          />
          <i
            v-show="!showPwd"
            @tap="showPwd=!showPwd"
            class="jeicon jeicon-eye "
          />
          <i
            v-show="showPwd"
            @tap="showPwd=!showPwd"
            class="jeicon jeicon-eye-close "
          />
        </div>
        <p class="pwd-desc">
          密码为6位以上字母+数字组合
        </p>
        <button
          @tap="submit"
          class="set-pwd-btn"
        >
          确定
        </button>
      </div>
    </div>

    <modal-message v-show="showModal">
      <div slot="modalMessageTitle">
        密码修改成功
      </div>
      <div
        slot="modalMessageFotter"
        @tap="reLogin"
      >
        重新登录
      </div>
    </modal-message>
  </div>
</template>

<script>
import modalMessage from '../../components/modal-message/index';
import { fetchUpdatePwd } from '../../actions/login';
import { validate, toastValidate } from '../../util/validate';
import { openWindow } from '@/util/util';

export default {
  name: 'ForgetPwd',
  components: {
    'modal-message': modalMessage,
  },
  data() {
    return {
      showPwd: true,
      loginInfo: {},
      showModal: false,
      params: {},
    };
  },
  created() {},
  mounted() {
    Waves.init();
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
    const oldBack = mui.back;
    mui.back = () => {
      JE.setLSItem('activeViewSet');
      oldBack();
    };
    document.addEventListener('pause', () => {
      JE.setLSItem('activeViewSet', plus.webview.currentWebview().id);
    }, false);
  },
  methods: {
    // 提交
    async submit() {
      Waves.attach('.set-pwd-btn', ['waves-button', 'waves-float']);
      if (
        !toastValidate('密码', validate.isNull(this.loginInfo.newPwd))
        || !toastValidate(
          '',
          validate.regPwd(this.loginInfo.newPwd),
          '密码为6位以上字母+数字',
        )
      ) {
        return false;
      }
      this.$refs.passwordInput.blur();
      this.$refs.textInput.blur();
      const res = await fetchUpdatePwd({
        j_username: this.params.phone,
        j_password: this.loginInfo.newPwd,
        code: this.params.validateCode || '',
        type: 'PHONE',
        j_dept: this.params.deptId,
        online: this.params.online || false,
        j_edittype: 'app',
        j_userid: JE.getCurrentUser().userId,
      });
      if (res.success) {
        this.showModal = true;
      } else {
        mui.toast('设置密码失败');
      }
    },
    clearPwd() {
      this.loginInfo.newPwd = '';
    },
    reLogin() {
      const modifyPage = plus.webview.getWebviewById('__modifyPsdView');

      JE.setLSItem('authorization');// 清空token
      JE.setLSItem('activeViewPwd');
      JE.setLSItem('activeViewSet');
      JE.fireServer('closesocket');// 关闭socket
      if (modifyPage) {
        plus.webview.close(modifyPage);
      }
      JE.logout();
      openWindow({
        url: './index.html',
        id: '__loginview',
        styles: {
          titleNView: {
            backgroundColor: '#536DFE',
            titleText: '',
            autoBackButton: false,
          },
        },
      });
    },
  },
};
</script>
